<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.teacher_Workplace
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_college }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分组弹框 -->
    <el-dialog title="教师" :visible.sync="dialogVisible" width="30%">
      <el-form
        :inline="true"
        ref="formInline"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="类型" prop="style">
          <el-select v-model="formInline.style" placeholder="类型">
            <el-option label="开题答辩小组" value="开题答辩小组"></el-option>
            <el-option
              label="毕业论文答辩小组"
              value="毕业论文答辩小组"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地点" prop="address">
          <el-input v-model="formInline.address" placeholder="地点"></el-input>
        </el-form-item>
        <el-form-item label="答辩时间" required>
          <el-date-picker
            v-model="formInline.value1"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="组别" prop="user">
          <el-input v-model="formInline.user" placeholder="组别"></el-input>
        </el-form-item>
        <el-form-item label="是否组长" prop="region">
          <el-select v-model="formInline.region" placeholder="是否组长">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.get_collageteacher();
  },
  data() {
    return {
      n: "",
      formInline: {},
      tableData: [],
      tableData_student: [],
      dialogVisible: false,
      rules: {
        style: { required: true, message: "必填", trigger: "blur" },
        address: { required: true, message: "必填", trigger: "blur" },
        user: { required: true, message: "必填", trigger: "blur" },
        region: { required: true, message: "必填", trigger: "blur" },
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    // 编辑按钮
    handleEdit(row) {
      // console.log(row);
      this.n = row;
      this.dialogVisible = true;
    },
    // 添加按钮
    onSubmit() {
      const obj = { ...this.n, ...this.formInline };
      console.log(obj);
      this.$refs.formInline.validate((valid) => {
        if (!valid) return;
        // console.log(obj);
        this.$http
          .post(
            "http://127.0.0.1:8080/bigAdmin/insert_group",
            this.$qs.stringify(obj)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.$message.success(res.data.message);
              this.formInline = {};
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.message);
            }
            // console.log(res);
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    get_collageteacher() {
      this.$http
        .get("http://127.0.0.1:8080/bigAdmin/get_collageteacher")
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
</style>
